<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= pageTitle %></title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <div class="container">
    <h1>Session 演示应用</h1>
    
    <div class="nav">
      <% if (user) { %>
        <p>欢迎, <%= user.username %>!</p>
        <a href="/profile" class="btn">个人资料</a>
        <a href="/session-info" class="btn">查看 Session 信息</a>
        <a href="/logout" class="btn btn-danger">注销</a>
      <% } else { %>
        <p>您尚未登录</p>
        <a href="/login" class="btn">登录</a>
      <% } %>
    </div>
    
    <div class="content">
      <h2>什么是 Session?</h2>
      <p>Session 是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中。</p>
      
      <h2>Session 的工作原理</h2>
      <ol>
        <li>当用户首次访问网站时，服务器会创建一个唯一的 Session ID</li>
        <li>服务器将这个 Session ID 通过 Cookie 发送给浏览器</li>
        <li>浏览器在后续请求中会自动发送这个 Cookie</li>
        <li>服务器通过 Cookie 中的 Session ID 识别用户并获取对应的 Session 数据</li>
      </ol>
      
      <h2>Session 与 Cookie 的区别</h2>
      <ul>
        <li><strong>存储位置</strong>: Cookie 存储在客户端，Session 存储在服务器端</li>
        <li><strong>安全性</strong>: Session 比 Cookie 更安全，因为用户无法直接访问 Session 数据</li>
        <li><strong>存储容量</strong>: Cookie 通常限制为 4KB，而 Session 可以存储更多数据</li>
      </ul>
      
      <div class="demo-box">
        <h3>演示说明</h3>
        <p>在这个演示中，您可以:</p>
        <ul>
          <li>登录系统 (使用用户名: user1, 密码: password1)</li>
          <li>查看您的 Session 信息</li>
          <li>访问受保护的页面 (需要登录)</li>
          <li>注销登录 (销毁 Session)</li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>